<template>
    <el-card v-loading="loading">
        <div slot="header">
            <div class="back" @click="goBack">
                <el-button type="primary" size="mini">返回</el-button>
            </div>
            <el-row class="header">
                <el-avatar :size="60" :src="form.headimg_url">
                </el-avatar>
                <div class="header__right">
                    <div class="header__right-top">
                        <span> {{ form.nickname }}</span> <el-tag size="small">{{ form.age >= 0 ? form.age : '-'
                            }}岁</el-tag>
                        <img :src="sexUrl" alt=""><el-tag size="small">{{ form.status == 1 ? '使用中' : '未激活' }}</el-tag>
                    </div>
                    <div class="header__right-bottom">
                        <div class="header__right-bottom-right">
                            <span>学员账号: {{ form.account }}</span>
                            <div class="star"><img class="star" src="@/assets/img/kanke/student/star.png" alt=""><span
                                    class="star-num">{{ form.stars ?? '-' }}</span></div>
                            <span class="snow"><img class="snow" src="@/assets/img/kanke/student/snow.png"
                                    alt=""><span>{{
                                        form.flower_num ?? '-' }}</span></span>
                        </div>
                        <div>
                            <PersButton type="primary " perms="kanke:education:student:assign-classes" label="分配班级"
                                @click="handleAssign()">
                            </PersButton>
                            <PersButton perms="kanke:education:student:edit" label="编辑" @click="handleEdit()">
                            </PersButton>
                            <PersButton perms="kanke:education:student:del" label="删除" @click="handleDel()">
                            </PersButton>

                        </div>
                    </div>
                </div>
            </el-row>


        </div>
        <el-descriptions class="margin-top" :column="4">
            <el-descriptions-item label="手机号码">{{ form.mobile }}</el-descriptions-item>
            <el-descriptions-item label="学员昵称">{{ form.nickname }}</el-descriptions-item>
            <el-descriptions-item label="截止日期">{{ form.end_date }}</el-descriptions-item>
            <el-descriptions-item label="所在班级">{{ form.class_name }}</el-descriptions-item>
            <el-descriptions-item label="就读学校">{{ form.school }} </el-descriptions-item>
            <el-descriptions-item label="学员年级">{{ form.grade_name }}</el-descriptions-item>
            <el-descriptions-item label="学员生日">{{ form.birthday }}</el-descriptions-item>
            <el-descriptions-item label="备注昵称">{{ form.nickname_remark }}</el-descriptions-item>
            <el-descriptions-item label="居住城市">{{ form.city_name }}</el-descriptions-item>
            <el-descriptions-item label="家庭住址" :span="24">{{ form.address }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ form.remark }}</el-descriptions-item>
        </el-descriptions>
        <AddForm :visible.sync="showForm" @handleReload="init()" :id="form.user_id" />
        <AssignClass v-if="showAssign" :visible.sync="showAssign" @handleReload="init()" :detail="form"
            :key="`${form.id}-${form.class_id}`" />
    </el-card>

</template>
<script>
import { getStudentDetail, deleteStudent } from '@/api/kanke/student'
import AddForm from './components/AddForm.vue';
import AssignClass from './components/AssignClass.vue';

export default {
    name: 'KanKeStudentDetail',
    props: {

    },
    components: {
        AddForm,
        AssignClass
    },
    data() {
        return {
            loading: false,
            form: {
                id: 0,
                user_id: 0,
                mobile: '',
                nickname: '',
                end_date: '',
                school: '',
                grade: '',
                birthday: '',
                address: '',
                remark: '',

            },
            formLabelWidth: '80px',
            dialog: true,
            showForm: false,
            showAssign: false,
        }
    },
    created() {
        this.init()
    },
    computed: {
        sexUrl() {
            return this.form.gender === 1 ? require('@/assets/img/kanke/student/man.png') : require('@/assets/img/kanke/student/women.png')
        }
    },
    methods: {
        init() {
            this.loading = true;
            getStudentDetail({ user_id: this.$route.query.user_id }).then(res => {
                if (res.code == 200) {
                    this.form = { ...res.data }
                }
                this.loading = false
            })
        },
        goBack() {
            this.$router.go(-1)
        },
        handleClose(done) {
            this.$confirm('确认关闭?')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        cancelForm() {

        },
        handleAssign() {
            this.showAssign = true
        },
        handleEdit() {
            this.showForm = true
        },
        handleDel() {
            this.$confirm(`请确定是否将 ${this.form.nickname} 学员 删除 ?`, '删除学员', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await deleteStudent({ user_id: this.form.user_id })
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.$router.go(-1)
                }
            }).catch(() => {

            });
        }

    }
}
</script>
<style lang="scss" scoped>
.back {
    margin-bottom: 20px;
}

.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &__right {
        flex: 1;
        margin-left: 20px;

        &-top {
            display: flex;
            align-items: center;
            justify-content: flex-start;

            // 第一个子元素
            :first-child {
                margin-right: 10px;
            }

            img {
                width: 30px;
                margin: 0 10px;
            }

        }

        &-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;

            &-right {
                display: flex;
                align-items: center;

                .star {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    img {
                        width: 25px;
                        margin: 0 10px 0 20px;
                    }
                }

                .snow {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    img {
                        width: 30px;
                        margin: 0 0 0 20px;
                    }
                }
            }
        }

    }
}
</style>